<template>
<div>
    <div class="companyBoxTop">
        <a-tabs type="card" @change="onChange">
            <a-tab-pane key="1" tab="> 基本信息" :style="{height:screenHeight+ 'px',width:screenWidth+ 'px',overflowY:'scroll'}">
                <basicInformation v-bind="$attrs" :equipmentType="equipmentType" :basicInfo="basicInfo"></basicInformation>
            </a-tab-pane>
            <a-tab-pane key="2" tab="> 数采仪" :style="{height:screenHeight+ 'px',width:screenWidth+ 'px',overflowY:'scroll'}">
                <forInstrument v-bind="$attrs" ref="forInstrument" :monitorId="basicInfo.id"></forInstrument>
            </a-tab-pane>
            <a-tab-pane key="3" tab="> 在线监测仪" :style="{height:screenHeight+ 'px',width:screenWidth+ 'px',overflowY:'scroll'}">
                <onlineMonitor v-bind="$attrs" ref="onlineMonitor" :monitorId="basicInfo.id"></onlineMonitor>
            </a-tab-pane>
            <a-tab-pane key="4" tab="> 监测因子" :style="{height:screenHeight+ 'px',width:screenWidth+ 'px',overflowY:'scroll'}">
                <monitoringFactors v-bind="$attrs" ref="monitoringFactors" :monitorId="basicInfo.id"></monitoringFactors>
            </a-tab-pane>
        </a-tabs>
    </div>
</div>
</template>

<script>
    import basicInformation from "@/views/components/monitoring-information/basicInformation";
    import forInstrument from "@/views/components/monitoring-information/forInstrument";
    import onlineMonitor from "@/views/components/monitoring-information/onlineMonitor";
    import monitoringFactors from "@/views/components/monitoring-information/monitoringFactors";
    export default {
        name: "aggregation",
        props: {
            equipmentType:{
                type: Number,
                required: true
            },
            basicInfo:{
                type: Object,
                required: true
            }
        },
        components:{
            basicInformation,
            forInstrument,
            onlineMonitor,
            monitoringFactors
        },
        data(){
            return{
                screenHeight:document.body.clientHeight-460,
                screenWidth:document.body.clientWidth-84,
                timer:false,

            }
        },
        mounted () {
            const that = this
            window.onresize = () => {
                return (() => {
                    that.screenHeight = document.body.clientHeight-460
                    that.screenWidth = document.body.clientWidth-84
                })()
            }
        },
        methods:{
            onChange(key){
                console.log(key)
                if(key==2){
                    this.$nextTick(()=>{
                        this.$refs.forInstrument.getAcquisitionList();
                        this.$forceUpdate()
                    })

                }
              if(key==3){
                this.$nextTick(()=>{
                  this.$refs.onlineMonitor.getAcquisitionList();
                  this.$forceUpdate()
                })

              }
                if(key==4){
                    this.$nextTick(()=>{
                        this.$refs.monitoringFactors.getMonitorFactorsList();
                        this.$forceUpdate()
                    })

                }
            },
        },
        watch:{

            screenHeight(val){
                if(!this.timer){
                    this.screenHeight = val-460
                    this.timer = true
                    let that = this
                    setTimeout(function(){
                        that.timer = false
                    },400)
                }
            },
            screenWidth(val){
                if(!this.timer){
                    this.screenWidth = val-84
                    this.timer = true
                    let that = this
                    console.log(this.screenWidth)
                    this.$forceUpdate();
                    setTimeout(function(){
                        that.timer = false
                    },400)
                }
            }
        }
    }
</script>

<style scoped lang = "scss">
    //::v-deep .ant-card-bordered {
    //    border: 1px solid #207064;
    //}
    //::v-deep .ant-card-head{
    //    border-bottom: 1px solid #207064;
    //}

    ::v-deep .ant-tabs-tabpane-inactive{
        display: none;
    }
</style>
